<template>
  <div>
    <el-steps :active="active" finish-status="success">
      <el-step title="Step 1"></el-step>
      <el-step title="Step 2"></el-step>
      <el-step title="Step 3"></el-step>
    </el-steps>

    <vxe-form
        v-show="show"
      title-colon
      ref="xForm"
      title-align="left"
      title-width="100"
      :data="formData"
      :rules="formRules"
      :loading="loading2"
      @submit="submitEvent"
      @reset="resetEvent"
    >
     <vxe-form-item
          title="账号"
          field="account"
          span="8"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="formData.account"
              type="number"
              placeholder="请输入账号"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>

        <vxe-form-item
          title="密码"
          field="password"
          span="8"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="formData.password"
              type="password"
              placeholder="请输入密码"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>

        <vxe-form-item span="24" :item-render="{}">
        <template #default>
          <vxe-button type="submit" status="primary">提交</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>

    <vxe-form
    v-show="show2"
      title-colon
      ref="xForm2"
      title-align="left"
      title-width="100"
      :data="ruleForm"
      :rules="rules"
      :loading="loading2"
      @submit="submitEvent2"
      @reset="resetEvent2"
    >
        <vxe-form-item
          title="旧密码"
          field="jiuPassword"
          span="8"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="ruleForm.jiuPassword"
              type="password"
              placeholder="请输入旧密码"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>

          <vxe-form-item
          title="新密码"
          field="xinPassword"
          span="8"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="ruleForm.xinPassword"
              type="password"
              placeholder="请输入新密码"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>

          <vxe-form-item
          title="确认密码"
          field="addPassword"
          span="8"
          :item-render="{}"
          title-overflow="title"
        >
          <template #default>
            <vxe-input
              v-model="ruleForm.addPassword"
              type="password"
              placeholder="请输入确认密码"
              clearable
            ></vxe-input>
          </template>
        </vxe-form-item>

        <vxe-form-item span="24" :item-render="{}">
        <template #default>
          <vxe-button type="submit" status="primary">提交</vxe-button>
          <vxe-button type="reset">重置</vxe-button>
        </template>
      </vxe-form-item>
    </vxe-form>

    <div class="text" v-show="show3">
        <span>恭喜你！！密码修改成功,返回</span>
        <span style="color:red" @click="homeBtn">首页</span>
    </div>
  </div>
</template>

<script>
import { ElMessage } from "element-plus";
export default {
  name:'ChangePassword',
  data() {
    return {
      show: true,
      show2: false,
      show3: false,
      active: 0,
      formData: {
        account: "",
        password: "",
      },
      ruleForm: {
        jiuPassword: "",
        xinPassword: "",
        addPassword: "",
      },
      formRules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
          {
            min: 2,
            max: 10,
            message: "账号长度2到10",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 12,
            message: "密码长度6到12",
            trigger: "blur",
          },
        ],
      },
      rules: {
        jiuPassword: [
          {
            required: true,
            message: "请输入旧密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 12,
            message: "密码长度6到12",
            trigger: "blur",
          },
        ],
        xinPassword: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 12,
            message: "密码长度6到12",
            trigger: "blur",
          },
        ],
        addPassword: [
          {
            required: true,
            message: "请确认密码",
            trigger: "blur",
          },
          {
            min: 6,
            max: 12,
            message: "密码长度6到12",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitEvent() {
      console.log(this.formData);
      this.show = false;
      this.show2 = true;
      this.active = 1;
    },
    resetEvent() {
      this.$XModal.message({ message: "重置事件", status: "info" });
    },

    submitEvent2() {
      if (this.ruleForm.jiuPassword == this.ruleForm.xinPassword) {
        this.$XModal.message({ content: "新密码与旧密码不能一致" });
      } else if (this.ruleForm.addPassword != this.ruleForm.xinPassword) {
        this.$XModal.message({ content: "两次密码不一致" });
      } else {
        this.show2 = false;
        this.show3 = true;
        this.active = 2;
      }
    },
    resetEvent2() {
      this.$XModal.message({ message: "重置事件", status: "info" });
    },
    homeBtn() {
        this.active = 3;
        this.$router.push('/')
    },
  },
};
</script>

<style lang="less" scoped>
:deep(.vxe-row) {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 100px;
  height: 300px;
  .vxe-form--item {
    margin: 10px 0;
  }
}
.text {
  width: 100%;
  text-align: center;
  color: rebeccapurple;
  height: 300px;
  background-color: #fff;
  line-height: 300px;
}
</style>